<template>
  <div class="threeMoney">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="170px" class="demo-ruleForm">
			<el-form-item label="开通产品类型：" prop="productType">
				<el-radio-group v-model="ruleForm.productType">
					<el-radio v-for="item in productTypeList" :key="item.id" :label="item.id" >{{item.value}}</el-radio>
				</el-radio-group>
			</el-form-item>
			<div class="list">
				<el-form-item label="开通客户端类型：" prop="appPayType">
					<el-select multiple  v-model="ruleForm.appPayType" placeholder="请选择子商户类型">
						<el-option v-for="item in appPayTypeList" :key="item.id" :label="item.value" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</div>
      <div class="list">
				<el-form-item label="支付类型：" prop="payType">
					<el-select multiple v-model="ruleForm.payType" placeholder="请选择子商户类型">
						<el-option v-for="item in payTypeList" :key="item.id" :label="item.value" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</div>
      <div class="list">
				<el-form-item label="费率类型：" prop="feePurpose">
					<el-select v-model="ruleForm.feePurpose" placeholder="请选择子商户类型">
						<el-option v-for="item in feePurposeList" :key="item.id" :label="item.value" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</div>
      <el-form-item label="费率模式：" prop="appFeeMode">
				<el-radio-group v-model="ruleForm.appFeeMode">
					<el-radio v-for="item in appFeeModeList" :key="item.id" :label="item.id" >{{item.value}}</el-radio>
				</el-radio-group>
			</el-form-item>
      <div class="list" v-if="ruleForm.appFeeMode == 'DEFAULT'">
				<el-form-item label="费率：" prop="feeValue">
					<el-input placeholder="请输入内容" v-model="ruleForm.feeValue">
            <template slot="append">%</template>
          </el-input>
				</el-form-item>
			</div>
      <div class="tabList" v-if="ruleForm.appFeeMode == 'RANGE'">
        <div class="lable">费率及起始区间：</div>
        <div class="main">
          <div class="top_bt">
            <div class="list"><i>*</i><span>分段费率区间开始(元)</span></div>
            <div class="list"><i>*</i><span>分段费率区间结束(元)</span></div>
            <div class="list"><i>*</i><span>计费类型</span></div>
            <div class="list"><i>*</i><span>卡类型(银联卡使用)</span></div>
            <div class="list"><i>*</i><span>费率(%)</span></div>
            <div class="list"><i>*</i><span>最小费率金额(元)</span></div>
            <div class="list"><i>*</i><span>最大费率金额(元)</span></div>
            <div class="btn_list"><span>操作</span></div>
          </div>
          <div class="con_box" v-for="(item,index) in ruleForm.feeRanges" :key="index" >
            <div class="inp_list">
              <el-form-item :prop="`feeRanges.${index}.start`" :rules="feeRangesRlles.start">
                <el-input placeholder="请输入整数" v-model="item.start"></el-input>
              </el-form-item>
            </div>
            <div class="inp_list">
              <el-form-item :prop="`feeRanges.${index}.end`" :rules="feeRangesRlles.end">
                <el-input placeholder="请输入整数" v-model="item.end"></el-input>
              </el-form-item>
            </div>
            <div class="inp_list">
              <el-form-item :prop="`feeRanges.${index}.calcType`" :rules="feeRangesRlles.calcType">
                <el-select v-model="item.calcType" placeholder="请选择">
                  <el-option v-for="item in calcTypeList" :key="item.id" :label="item.value" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="inp_list">
              <el-form-item :prop="`feeRanges.${index}.onlineCardType`" :rules="feeRangesRlles.onlineCardType">
                <el-select v-model="item.onlineCardType" placeholder="请选择">
                  <el-option v-for="item in onlineCardTypeList" :key="item.id" :label="item.value" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="inp_list">
              <el-form-item :prop="`feeRanges.${index}.fee`" :rules="feeRangesRlles.fee">
                <el-input placeholder="请输入金额" v-model="item.fee"></el-input>
              </el-form-item>
            </div>
            <div class="inp_list">
              <el-form-item :prop="`feeRanges.${index}.minFee`" :rules="feeRangesRlles.minFee">
                <el-input placeholder="请输入金额" v-model="item.minFee"></el-input>
              </el-form-item>
            </div>
            <div class="inp_list">
              <el-form-item :prop="`feeRanges.${index}.maxFee`" :rules="feeRangesRlles.maxFee">
                <el-input placeholder="请输入内容" v-model="item.maxFee"></el-input>
              </el-form-item>
            </div>
            <div class="btn_list"><el-button  v-if="index != 0" size="small" @click="removeDomain(item)">删除</el-button></div>
          </div>
          <div class="bot_box"><el-button type="primary" size="small" @click="addDomain">增加区间</el-button></div>
        </div>
      </div>
      <div class="list" v-if="ruleForm.appFeeMode == 'DEFAULT'">
				<el-form-item label="最低费率金额（元）：" prop="minFee">
					<el-input placeholder="请输入内容" v-model="ruleForm.minFee"></el-input>
				</el-form-item>
			</div>
    </el-form>
  </div>
</template>
<script>
import { mapState } from 'vuex'
// components
import Loading from '@/components/Loading/index'
// api
import {
 getopenProductDetail,
} from '@/api/moneyManagement'

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    merchantNo: String,
    orType:String,
    status:String,//点击查看进来，判断他是否已经填写过这一步，如果填写过才需要请求数据回显
  },
  data() {
    return {
			typeList: [
				{id:1,value: '合利宝'},
				{id:2,value: '工行'},
			],
			merchantTypeList: [
				{id:1,value: '合利宝'},
				{id:2,value: '工行'},
			],
      ruleForm: {
        merchantNo: '',
				productType: '',//开通产品类型
				appPayType: [],//开通客户端类型
				payType: [],//支付类型
				feePurpose: '',//费率类型
				appFeeMode: 'DEFAULT',//费率模式
				feeValue: '',//费率
				minFee: '',//最低费率金额（元）
				feeRanges: [
          {
            start: '',//开始
            end: '',//结束
            calcType: '',//计费类型
            onlineCardType: '',//卡类型
            fee: '',//费率
            minFee: '',//最小费率
            maxFee: '',//最大费率
          }
        ],//费率及起始区间
			},
			rules: {
				productType: [
					{ required: true, message: '请选择产品', trigger: 'blur' },
				],
        appPayType: [
					{ required: true, message: '请客户端类型', trigger: 'blur' },
				],
        payType: [
					{ required: true, message: '请选择支付类型', trigger: 'blur' },
				],
        feePurpose: [
					{ required: true, message: '请选择费率类型', trigger: 'blur' },
				],
        appFeeMode: [
					{ required: true, message: '请选择费率类型', trigger: 'blur' },
				],
        feeValue: [
					{ required: true, message: '请输入费率', trigger: 'blur' },
				],
        minFee: [
					{ required: true, message: '请输入最低费率金额', trigger: 'blur' },
				],

        // 'feeRanges.start':[{required: true, message: '域名不能为空', trigger: 'blur'}]
			},
      feeRangesRlles:{
        start:[{required: true, message: '分段费率区间开始为空', trigger: 'blur'}],
        end:[{required: true, message: '分段费率区间结束不能为空', trigger: 'blur'}],
        calcType:[{required: true, message: '请选择计费类型', trigger: 'blur'}],
        onlineCardType:[{required: true, message: '请选择卡类型', trigger: 'blur'}],
        fee:[{required: true, message: '费率不能为空', trigger: 'blur'}],
        minFee:[{required: true, message: '最小费率不能为空', trigger: 'blur'}],
        maxFee:[{required: true, message: '最大费率不能为空', trigger: 'blur'}],
      },
    
    }
  },
  computed: {
    ...mapState({
      productTypeList: function(state) {
        return state.common['merchant_hlb_open_product_type'] // 要取this的实例，只能用不同函数，不能用箭头函数
      },
      appPayTypeList: function(state) {
        return state.common['merchant_hlb_product_app_pay_type'] // 要取this的实例，只能用不同函数，不能用箭头函数
      },
      payTypeList: function(state) {
        return state.common['merchant_hlb_product_pay_type'] // 要取this的实例，只能用不同函数，不能用箭头函数
      },
      feePurposeList: function(state) {
        return state.common['merchant_hlb_open_app_fee_urpose'] // 要取this的实例，只能用不同函数，不能用箭头函数
      },
      appFeeModeList: function(state) {
        return state.common['merchant_hlb_open_app_fee_mode'] // 要取this的实例，只能用不同函数，不能用箭头函数
      },
      calcTypeList: function(state) {
        return state.common['merchant_hlb_open_calc_type'] // 要取this的实例，只能用不同函数，不能用箭头函数
      },
      onlineCardTypeList: function(state) {
        return state.common['merchant_hlb_fee_online_card_type'] // 要取this的实例，只能用不同函数，不能用箭头函数
      },
     
    })
  },
  created() {
    
    
	},
  mounted(){
    if(this.orType == 'edit' && this.status !=''){
      console.log('88888')
        this.getDetail()
    }
  },
  methods: {
    getDetail(){
      var merchantNo = this.merchantNo
      getopenProductDetail(merchantNo).then(res => {
        const { result} = res
        this.ruleForm.productType = result.productType
        this.ruleForm.appPayType = result.appPayType
        this.ruleForm.payType = result.payType
        this.ruleForm.feePurpose = result.feePurpose
        this.ruleForm.appFeeMode = result.appFeeMode
        this.ruleForm.feeValue = result.feeValue
        this.ruleForm.minFee = result.minFee
        this.ruleForm.feeRanges = result.feeRanges
      }).finally(() => {
        this.loading = false
      })
    },
		submitForm(formName) {
      this.ruleForm.merchantNo= this.merchantNo 
			this.$refs[formName].validate((valid) => {
				if (valid) {
					const data = {
            ...this.ruleForm
          }
          this.$emit("threeSuccess",data,'three')
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
    //增加区间
    addDomain() {
      this.ruleForm.feeRanges.push({
        start: '',//开始
        end: '',//结束
        calcType: '',//计费类型
        onlineCardType: '',//卡类型
        fee: '',//费率
        minFee: '',//最小费率
        maxFee: '',//最大费率
      });
    },
    //删除区间
    removeDomain(item) {
      console.log("item",item)
      var index = this.ruleForm.feeRanges.indexOf(item)
      console.log("index",index)
      if (index !== -1) {
        this.ruleForm.feeRanges.splice(index, 1)
      }
    },
  }
}
</script>
<style lang="scss" scoped>
@import '../style/moneyList';


</style>
